<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>浮动</title>
	<style type="text/css">
/* 	body{
	font-size: 0;
}
	div{
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		border: 1px solid red;
		display: inline-block;
		font-size: 16px;
	} */
	/* div{
		width: 100px;
		height: 100px;
		text-align: center;
		line-height: 100px;
		border: 1px solid red;
		float: right;
	} */

#div{
	background: red;
	overflow: hidden;
}
.div{

	width: 200px;
	height: 150px;
	font-size: 24px;
	border: 10px solid red;
	overflow: auto;
	text-align: center;/* 文字居中 */
	margin: 0 auto; /* 上线为0，左右为auto表示居中 */

}
.div:hover{
	color: blue;
	text-decoration: underline;
}
.div2{
	width: 400px;
	height: 350px;
	font-size: 24px;
	border: 1px solid red;
	overflow: auto;
	text-align: center;
}
.div:after{

	content: "我是伪类"；
	background:red;
}
h2{
	margin: 0px;
	width: 300px;
	height: 300px;
	border: 1px solid black;
background: yellow;
float: left;
}
p{
height: 300px;
background:  blue;
text-align: center;
}
p:after{

	content: "我是伪类";
	color: red;

}
	</style>
	<!--
	类型转换
	display:inline-block; 容易造成换行的空格 需要设置父级font-size :0px

	浮动 float
	其实就是使元素脱离文档流按照一定的方式排列，遇到相邻的元素或者父级的边界停下来。
	    特性 
	      1浮动的元素排在同一排
	      2浮动的元素内容撑开宽度
	      3浮动的元素支持所有css样式（如改变span）
	      4浮动的元素脱离文档流bfc (清除浮动overflow:hidden)
	      5浮动的元素提升层级半级（文本和属性配合margin可以实现文字环绕）

1
overflow 溢出
		hidden 溢出隐藏
		auto   溢出出现滚动条
		scroll  出现滚动条的位置	
2元素居中
    margin:0 auto;
3元素的伪类
	伪类：就是css为一些元素身上添加特殊属性
   ：hover 鼠标停留 
   :after  在元素之后插入一些内容


 BFC  就是清理浮动，就是用来处理浮动元素脱离文档流的问题。  
     1：父级也浮动
         弊端：左右的margin:0 auto 会失效。
     2 父级加display:inline-block    
		弊端：左右的margin:0 auto 会失效。(需要居中时给父级加text-align: center;)

	 3	给父级加高height
	     弊端：扩展性不好。
	 4  br标签
	    写法:<br/>
	    <br clear="all" /> 
	    作用：换行\清除浮动
	    弊端：不符合w3c规范（标签有时自动生成）违反样式行为结构三者分离原则。
	     
	 5 clear
		clear: both;(left\right\both)
		弊端同上4
	 6伪类清浮动
	  .clear:after{
			/* 追加一个空内容，然后变为块，清除浮动 */
			content: "";
			display: block;
			clear: both;
		}
	   第六种为主流方法，建议使用
	-->
</head>
<body>
	<div>我是div1</div>
	<div>我是div2</div>
	<div>我是div3</div>
	<div>我是div4</div>

	<div id="div">

		<h2>我是span</h2>

	</div>
	<p>woshi p</p>


	<div class="div">overflow我是一个小画家下压小画家我的骄傲看似简单大家奥斯卡的骄傲忘记打卡时间打卡机读卡坚实的啊看见到静安寺傻大姐啊看来是的 </div>
	<div class="div2">看我后面多出了after</div>
</body>
</html>